<template>
	<view class="my-badge">
		<!-- <u-navbar title="我的徽章" @rightClick="toPageInstructions" :autoBack="true" :bgColor="backgroundColor"
			leftIconColor="#ffffff" titleStyle="color:#ffffff;">
			<view class="u-nav-slot" slot="right">
				<u-icon name="@appstatic/my/my_icon_question_white.png" size='24px' color="#ffffff"></u-icon>
			</view>
		</u-navbar> -->
		
		<titlebara mode="" :backToIndex="false" :back="true" text="我的徽章" backgroundColor='rgba(0,0,0,0)'
			color='#ffffff'  @rightIconClick='toPageInstructions' img="@appstatic/my/my_icon_question_white.png">
		</titlebara>
		

		<view class="badge-view" :style="'margin-top:' +navigationBarHeight+'px;'">
			<scroll-view scroll-y :style="'height: '+(windowHeight - 10)+'px'">
				<view class="badge-box">
					<!-- 徽章状态 -->
					<view class="badge_state">
						<!-- 未获得徽章 -->
						<view class="badge_text_1" v-if="badgeCount==0">
							未获得徽章
						</view>
						<!-- 未佩戴徽章 -->
						<block v-else-if="badgeCount!=0&&(mybadgeData==null||mybadgeData.statusFlag==0)">
							<view class="badge_text_1" style="margin-bottom: 12rpx;">
								未佩戴徽章
							</view>
							<view class="badge_text_2">
								获得徽章总数：{{badgeCount}}
							</view>
						</block>
						<!-- 佩戴徽章 -->
						<view v-else class="badge_state_transverse">
							<view class="badge-box" style="margin-left: 0rpx;width: 490rpx; ">
								<view class="badge_text_1" style="margin-bottom: 12rpx;">
									当前佩戴徽章 - {{mybadgeData.badgeName}}
								</view>
								<view class="badge_text_2" style="margin-bottom: 12rpx;">
									获得徽章总数：{{badgeCount}}
								</view>
								<text class="badge_remove_btn" @click="unsnatchBadge">卸下徽章</text>
							</view>
							<image class="badge_image" :src="mybadgeData.badgeImg"></image>
						</view>
					</view>

					<block v-for="(item, index) in dataList" :key="index">
						<view class="badge_title" :style="index!=0?'margin-top: 40rpx;':'margin-top: 0rpx;'">
							<view class="badge_title_view">
								<view class="badge_title_text">
									{{item.badgeTypeName}}
								</view>
								<view class="badge_content_text" style="margin-left: 20rpx;">
									{{item.badgeTypeRemark}}
								</view>
							</view>
						</view>
						<view class="badge_content">
							<u-grid :border="false">
								<u-grid-item v-for="(baseListItem,baseListIndex) in item.badgeList"
									:key="baseListIndex">

									<image class="badge_image" :src="baseListItem.badgeImg"></image>


									<text class="badge_text" style="margin-top: 8rpx;">{{baseListItem.badgeName}}</text>
									<block v-if="baseListItem.isGetBadge=='已获得'">
										<text class="badge_wear_btn" v-if="baseListItem.isPeiDai=='未佩戴'"
											@click="changeBadge(baseListItem)">佩戴</text>
										<text class="badge_wear_text"
											v-else-if="baseListItem.isPeiDai=='已佩戴'">已佩戴</text>
										<text class="badge_wear_btn" v-else style="visibility: hidden;">佩戴</text>
									</block>
									<text class="badge_wear_text_1" v-else>未获得</text>
								</u-grid-item>
							</u-grid>
						</view>
						<view class="badge_bottom">
						</view>
					</block>

				</view>
			</scroll-view>
		</view>

		<u-modal :show="changeShow" title='替换确认' content='当前已有佩戴徽章，确认替换？' :showCancelButton='true'
			confirmColor='#EA5404' @confirm='changeBadgeStatusByUserId(changeItem,"佩戴")' @cancel='changeShow=false'>
		</u-modal>

		<u-modal :show="changeConfirmshow" :content='changeConfirmshowContent' confirmText='确认' confirmColor='#EA5404'
			@confirm='refresh'></u-modal>

		<u-modal :show="unsnatchBadgeShow" title='卸下确认' content='确认卸下当前徽章？' :showCancelButton='true'
			confirmColor='#EA5404' @confirm='changeBadgeStatusByUserId(mybadgeData,"卸下")'
			@cancel='unsnatchBadgeShow=false'>
		</u-modal>


	</view>
</template>

<script>
	const app = getApp();
	const network = require("@manager/network-manager.js")
	const dialog = require("../../../utils/dialog.js")
	import titlebara from '@/components/titlebar/titlebar'
	export default {
		components: {
			titlebara
		},
		data() {
			return {
				backgroundColor: 'rgba(255, 122, 1, 100%)',
				value: true,
				windowHeight: app.globalData.windowHeight - app.globalData.navigationBarHeight,
				navigationBarHeight: app.globalData.navigationBarHeight,
				changeShow: false,
				changeConfirmshow: false,
				unsnatchBadgeShow: false,
				changeConfirmshowContent: '您的徽章已佩戴成功',
				mybadgeData: {},

				dataList: [],
				changeItem: null,

				badgeCount: 0
			};
		},

		onLoad: function(options) {
			// this.changeShow = true
		},
		onShow() {
			this.refresh()
		},

		methods: {
			refresh: function() {
				this.getBadgeStatusByUserId()
				this.countBadgeByUser4APP()
				this.getUserMasterShow()

			},

			//统计用户获得的徽章数量-APP(根据用户ID)
			countBadgeByUser4APP: function() {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_ACTIVITY_BADGEMGT_COUNTBADGESTATUSBYUSER4APP;
				var params = {
					userId: app.getUserId()
				};
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						that.badgeCount = res.data
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
				});

			},



			//根据用户ID获取佩戴的徽章信息
			getBadgeStatusByUserId: function() {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_ACTIVITY_BADGEMGT_GETBADGESTATUSBYUSERID;
				var params = {
					userId: app.getUserId()
				};
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						that.mybadgeData = res.data
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
				});

			},


			//徽章列表-APP/管理后台
			getUserMasterShow: function() {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_ACTIVITY_BADGEMGT_GETBADGELIST;
				var params = {
					userId: app.getUserId()
				};
				network.get(uri, params, 'form', null, true).then(res => {
					if (res.code == 200) {
						that.changeConfirmshow = false
						that.dataList = res.data
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
				});

			},
			//改变徽章状态
			changeBadge: function(baseListItem) {
				var that = this;
				if (that.mybadgeData == null || that.mybadgeData.statusFlag == 0) {
					that.changeBadgeStatusByUserId(baseListItem, "佩戴")
				} else {
					that.changeShow = true
					that.changeItem = baseListItem
				}
			},

			//卸下徽章
			unsnatchBadge: function(baseListItem) {
				var that = this;
				that.unsnatchBadgeShow = true

			},


			//根据用户ID变更徽章佩戴状态
			changeBadgeStatusByUserId: function(baseListItem, type) {
				var that = this;
				that.changeShow = false
				that.unsnatchBadgeShow = false
				var uri = app.globalData.config.interfaces.URL_ACTIVITY_BADGEMGT_CHANGEBADGESTATUSBYUSERID;
				var params = {
					userId: app.getUserId()
				};
				if (type == '佩戴') {
					params.badgeId = baseListItem.id
				} else {
					params.badgeId = ''
				}
				network.get(uri, params, 'form', null, true).then(res => {
					if (res.code == 200) {
						if (type == '佩戴') {
							that.changeConfirmshowContent = '您的徽章已佩戴成功'
						} else {
							that.changeConfirmshowContent = '您的徽章已成功卸下'
						}
						that.changeConfirmshow = true
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
				});
			},
			toPageInstructions(e) {
				uni.navigateTo({
					url: '/module_my/pages/myBadge/badgeInstructions'
				})
				return false
			},


		}


	}
</script>

<style lang='scss' scoped>
	.showMore {
		width: 24px;
		height: 24px;
		position: absolute;
		top: calc(50% - 15px);
		left: calc(100% - 40px);
	}

	.titleText {
		color: #ffffff;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: 600;
		font-size: 16px;
		align-items: center;
		display: flex;
		position: absolute;
		top: calc(50% - 10px);
		left: calc((100% - 70px)/2);
	}


	.my-badge {

		width: 100vw;
		min-height: 100vh;
		box-sizing: border-box;
		background: rgba(255, 122, 1, 100%) url(@appstatic/img/my/orange-bg-img.jpg) no-repeat;
		background-position: 0 0;
		background-size: 100% 100%;
		background-attachment: fixed;


		image {
			image-rendering: -moz-crisp-edges;
			image-rendering: -o-crisp-edges;
			image-rendering: -webkit-optimize-contrast;
			image-rendering: crisp-edges;
			-ms-interpolation-mode: nearest-neighbor;
		}

		.badge-view {
			width: 750rpx;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
		}

		.badge-box {
			display: flex;
			flex-direction: column;
			width: 670rpx;
			margin-left: 40rpx;
		}

		.badge_state {
			margin-top: 40rpx;
			margin-bottom: 12rpx;
		}

		.badge_text_1 {
			font-weight: 500;
			font-size: 36rpx;
			line-height: 52rpx;
			display: flex;
			align-items: center;
			color: #FFFFFF;
		}

		.badge_text_2 {
			font-weight: 400;
			font-size: 24rpx;
			line-height: 34rpx;
			display: flex;
			align-items: center;
			color: #FFFFFF;
		}

		.badge_state_transverse {
			display: flex;
			flex-direction: row;
			width: 670rpx;
			justify-content: space-between;
			align-items: center;
		}

		.badge_title {
			width: 670rpx;
			height: 128rpx;
			background-image: url('@appstatic/img/my/badge_title_bg.png');
			background-size: 670rpx, 128rpx;
		}

		.badge_content {
			width: 670rpx;
			margin-top: -48rpx;
			background-image: url('@appstatic/img/my/badge_content_bg.png');
			background-size: 670rpx;
			padding-top: 10px;
			padding-bottom: 20px;
		}

		.badge_bottom {
			width: 670rpx;
			height: 40rpx;
			background-image: url('@appstatic/img/my/badge_bottom_bg.png');
			background-size: 670rpx 40rpx;
		}

		.badge_title_view {
			width: 590rpx;
			height: 80rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			margin-left: 40rpx;

		}

		.badge_title_text {
			font-weight: 500;
			font-size: 32rpx;
			line-height: 46rpx;
			display: flex;
			align-items: center;
			color: #3D3A3A;
		}

		.badge_content_text {
			font-weight: 400;
			font-size: 20rpx;
			line-height: 28rpx;
			display: flex;
			align-items: center;
			color: #ADB0AE;
		}



		.badge_image {
			width: 180rpx;
			height: 180rpx;
		}

		.badge_text {
			font-family: 'Arial';
			font-style: italic;
			font-weight: 700;
			font-size: 32rpx;
			line-height: 36rpx;
			display: flex;
			align-items: center;
			text-align: center;
			color: #FFFFFF;
		}

		.badge_wear_btn {
			width: 104rpx;
			margin-top: 16rpx;
			height: 42rpx;
			box-sizing: border-box;
			border-radius: 2px;
			text-align: center;
			line-height: 42rpx;
			align-items: center;
			font-size: 24rpx;
			font-family: 'Noto Sans SC';
			font-style: normal;
			font-weight: 500;
			color: #EA5404;
			background-color: #FFFFFF;
			margin-bottom: 16rpx;
		}

		.badge_wear_text {
			width: 104rpx;
			margin-top: 16rpx;
			height: 42rpx;
			box-sizing: border-box;
			border-radius: 2px;
			text-align: center;
			line-height: 42rpx;
			align-items: center;
			font-size: 24rpx;
			font-family: 'Noto Sans SC';
			font-style: normal;
			font-weight: 500;
			color: #FFFFFF;
			margin-bottom: 16rpx;
		}

		.badge_wear_text_1 {
			width: 104rpx;
			margin-top: 16rpx;
			height: 42rpx;
			box-sizing: border-box;
			border-radius: 2px;
			text-align: center;
			line-height: 42rpx;
			align-items: center;
			font-size: 24rpx;
			font-family: 'Noto Sans SC';
			font-style: normal;
			font-weight: 500;
			color: #BA4100;
			margin-bottom: 16rpx;
		}

		.badge_remove_btn {
			width: 184rpx;
			height: 54rpx;
			box-sizing: border-box;
			border-radius: 2px;
			text-align: center;
			line-height: 54rpx;
			align-items: center;
			font-size: 26rpx;
			font-family: 'Noto Sans SC';
			font-style: normal;
			font-weight: 500;
			color: #EA5404;
			background-color: #FFFFFF;
		}


	}
</style>
